<template>
  <div>
    <h3>门店列表</h3>
    <div>
      门店名称:<input type="text" v-model="info.shopName" /> 门店地址:
      <select v-model="info.shopAddress">
        <option value="">请选择</option>
        <option :value="item.Id" v-for="item in addressList">
          {{ item.AddressName }}
        </option>
      </select>
      <input type="button" value="查询" class="btn btn-primary" @click="show" />
      <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />
      <input
        type="button"
        value="批量启用"
        class="btn btn-warning"
        @click="updateStateAll(1)"
      />
      <input
        type="button"
        value="批量禁用"
        class="btn btn-info"
        @click="updateStateAll(0)"
      />
      <input type="button" value="重置" class="btn btn-info" @click="reset" />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr class="bg-primary">
          <td><input type="checkbox" v-model="checked" @click="checkAll" /></td>
          <td>Id</td>
          <td>门店名称</td>
          <td>分店名称</td>
          <td>门店图片</td>
          <td>开业时间</td>
          <td>酒店状态</td>
          <td>酒店特色</td>
          <td>门店介绍</td>
          <td>门店地址</td>
          <td>门店类型</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list" :key="item.Id">
          <td>
            <input
              type="checkbox"
              v-model="ids"
              :value="item.Id"
              @change="checkOne"
            />
          </td>
          <td>{{ item.Id }}</td>
          <td>{{ item.ShopName }}</td>
          <td>{{ item.BranchName }}</td>
          <td><img :src="item.Photo" width="100" height="100" /></td>
          <td>{{ moment(item.OpenTime).format('YYYY-MM-DD') }}</td>
          <td>{{ item.State == 1 ? '是' : '否' }}</td>
          <td>{{ item.TeSe }}</td>
          <td>{{ item.Desc }}</td>
          <td>{{ item.AddressName }}</td>
          <td>{{ item.Type }}</td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.Id)"
            />
            <input
              type="button"
              value="详情"
              class="btn btn-primary"
              @click="update(item.Id)"
            />
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="del(item.Id)"
            />
            <input
              type="button"
              value="开启"
              v-if="item.State == 0"
              class="btn btn-warning"
              @click="updateStateOne(item.Id, 1)"
            />
            <input
              type="button"
              value="禁用"
              v-if="item.State == 1"
              class="btn btn-info"
              @click="updateStateOne(item.Id, 0)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 分页 -->
    <div>
      <!-- 显示 -->
      <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >

      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >

      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >
      <!-- 改页码 -->

      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">
        {{ item }}</span
      >
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input
        type="button"
        value="跳转"
        class="btn btn-warning"
        @click="goPage(info.pageIndex)"
      />

      <!-- 改页容量 -->

      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
//---------------------------数据------------------------------
//声明一个变量存储获取列表向后端传递的数据
let info: any = reactive({
  pageIndex: 1, //页码
  pageSize: 2, //页容量
  shopName: '',
  shopAddress: '',
});

//声明一个变量接受后端返回的数据
let data: any = reactive({
  list: [],
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

//门店地址列表
let addressList: any = ref([]);

//页容量
let arr: any = ref([2, 4, 6, 8]);

//声明一个变量控制单个复选框选中与未选中
let checked: any = ref(false);

//声明一个变量控制多个复选框选中与未选中
let ids: any = ref([]);
//-------------------------生命周期---------------
onMounted(() => {
  getShopList();
  getAddressList();
});
//-------------------------函数---------------
//重置
const reset = () => {
  info.shopName = '';
  info.shopAddress = '';
  getShopList();
};

//单个修改状态
const updateStateOne = (id: any, state: any) => {
  //1.友好提示
  let f = confirm('请问您确定要修改状态吗？');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Shops/UpdateShopModelState',
      method: 'put',
      params: {
        ids: id,
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改状态成功');
          //3.刷新列表
          getShopList();
        } else {
          alert('修改失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量启用和禁用
const updateStateAll = (state: any) => {
  //1.友好提示
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问您确定要修改状态吗？');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Shops/UpdateShopModelState',
      method: 'put',
      params: {
        ids: ids.value.toString(),
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改成功');
          checked.value = false;
          ids.value = [];
          //3.刷新列表
          getShopList();
        } else {
          alert('修改失败');
          checked.value = false;
          ids.value = [];
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量删除
const delAll = () => {
  //1.友好提示（1.复选框必选一项2.确认删除）
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问确认要删除吗？');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Shops/DelShops',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false;
          //3.刷新列表
          getShopList();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//选中一个
const checkOne = () => {
  //改变checked.value的值  checked的值什t么时候是true 什么时候是false
  //条件：ids的长度和data.list的长度相同 checked的值为true  否则为false
  if (ids.value.length == data.list.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

//实现全选与全不选
const checkAll = () => {
  //1先要知道自己选中与未选中
  // if (checked.value == true) {
  //   checked.value = false;
  // } else {
  //   checked.value = true;
  // }
  checked.value = !checked.value;

  //2 控制下面的复选框选中与未选中:如果复选框是被选中的  让list中id全部都放入到ids中去，如果复选框没有被选中ids为空数组
  if (checked.value == true) {
    ids.value = data.list.map((item: any) => {
      return item.Id;
    });
  } else {
    ids.value = [];
  }
};

//------------------------------函数-------------------------------
//修改的第一步:跳转并且传参
const update = (id: any) => {
  router.push({
    path: '/shopUpdate',
    query: {
      id: id,
    },
  });
};

//删除操作
const del = (id: any) => {
  //1.友好提示
  let f = confirm('请问您确认删除吗？');
  //2.发送网络请求
  if (f) {
    axios({
      url: '/api/Shops/DelShops',
      method: 'delete',
      params: {
        ids: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.刷新列表
          getShopList();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//查询及改页容量时需要让pageIndex=1
const show = () => {
  info.pageIndex = 1;
  getShopList();
};

//分页
const goPage = (num: any) => {
  if (num < 1) {
    info.pageIndex = 1;
    return;
  }

  if (num > data.totalPage) {
    info.pageIndex = data.totalPage;
    return;
  }

  info.pageIndex = num;
  getShopList();
};

//获取门店列
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      //第一种赋值
      // data.list = res.data.list;
      // data.totalCount = res.data.totalCount;
      // data.totalPage = res.data.totalPage;
      //第二种赋值
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//2.读取数据列表(地址)

const getAddressList = () => {
  axios({
    url: '/api/Shops/GetAddRessList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      addressList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
span {
  margin: 0 10px;
}
b {
  color: red;
}
input[type='button'] {
  margin: 0 5px;
}
table {
  margin-top: 10px;
}
</style>
